<template>
  <div>
    <button @click="flag=!flag">切换</button>
    <A v-if="flag" v-move:name.zs="{background:'blue'}"></A>
    <A v-move:name.zs="{background:'blue',flag:flag}"></A>
  </div>
</template>
<script setup lang="ts">
import {Directive, DirectiveBinding, ref} from 'vue'
import A from "@/components/custome/command/A.vue";

const flag = ref<boolean>(true)
type Dir = {
  background:string
}
/**
 * 自定义指令
 *
 * 创建时走 created beforeMount mounted
 * 更新时走 beforeUpdate updated
 * 销毁时走 beforeUnmount unmounted
 *
 *
 */


const vMove:Directive = {
  created(){
    console.log("=======created")
  },
  beforeMount(){
    console.log("========beforeMount")
  },
  mounted(el:HTMLElement,dir:DirectiveBinding<Dir>){
    console.log("=========mounted")
    el.style.background = dir.value.background
  },
  beforeUpdate(){
    console.log("========beforeUpdate")
  },
  updated(){
    console.log("========updated")
  },
  beforeUnmount(){
    console.log("========unmounted")
  },
  unmounted(){
    console.log("========unmounted")
  },
}
</script>

<style scoped>

</style>
